<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view class="configNotice">
      <view v-for="(item, index) in configList" :key="index" class="noticeSmall" @click="resouceFn(item)">
        <view class="timer">{{ item.createTime }}</view>
        <image v-if="!!item.msgImgApp" :src="item.msgImgApp" class="tipsImg" />
        <view class="noticeInfo">
          <view class="title">{{ item.msgTitle }}</view>
          <view class="tell">{{ item.msgBody }}</view>
        </view>
      </view>
    </view>
    <view class="u-p-b-40">
      <u-loadmore :status="status" />
    </view>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page'
import { setPageParamsFn } from '@/common/common'
import { getConfigTips, batchUpdateOperate } from '@/api/newsNotice'
export default {
  components: {
    basePage,
  },
  data() {
    return {
      configList: [],
      pageNum: 1,
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      status: 'loading',
    }
  },
  onShow() {
    this.batchUpdateOperate()
  },
  mounted() {
    this.getConfigTips()
  },
  onReachBottom() {
    this.pageNum++
    this.getConfigTips()
  },
  onPullDownRefresh() {
    this.pageNum = 1
    this.configList = []
    this.getConfigTips()
  },
  methods: {
    resouceFn(item) {
      this.bannerHref(item)
    },
    bannerHref(e) {
      const { param1 = '', param2 = '' } = JSON.parse(e.jumpVar) || {}
      const callbackUrl = '/shopIndex/shopIndex'
      console.log(JSON.parse(e.jumpVar))
      switch (e.jumpType) {
        case 1:
          uni.redirectTo({ url: '/shopIndex/shopIndex' })
          break;
        case 2:
          uni.navigateTo({ url: `/customer/activityPage?url=${this.vuex_baseURL.webUrl}${param1}` }) //活动页
          break;
        case 3:
          uni.navigateTo({ url: '/shopIndex/shopIndex' })
          break;
        case 4:
          uni.navigateTo({ url: `/shopDetail/index?spuCode=${param2}&skuCode=${param1}` })
          break;
        case 5:
          uni.navigateTo({ url: `/productList/productList/index?queryString=${param1}&title=${param1}&` })
          break;
        case 6:
          if (!this.vuex_loginStatus) {
            uni.navigateTo({
              url: `/login/login/codeLogin?callbackUrl=${callbackUrl}`
            })
          } else {
            uni.navigateTo({ url: `/customer/custcoupon?couponId=${param1}` }) //我的优惠券//我的优惠券
          }
          break;
        case 7:
          uni.navigateTo({ url: `/myAccount/pointsMall/pointsGoodsDetail?skuId=${param2}` }) //积分商品详情
          break;
        case 8:
          uni.navigateTo({ url: `/orders/moreOrderDetail/index?id=${param1}` }) //订单详情
          break;
        case 12:
          if (!this.vuex_loginStatus) {
            uni.navigateTo({
              url: `/login/login/codeLogin?callbackUrl=${callbackUrl}`
            })
          } else {
            uni.redirectTo({ url: '/purchaseOrder/index' }) //购物车
          }
          break;
        case 14:
          uni.navigateTo({ url: '/customer/index' }) //客服
          break;
        case 15:
          uni.navigateTo({ url: '/pages/myAccount/index' }) //个人中心
          break;
        case 16:
          uni.navigateTo({ url: `/productList/productList/index?brandId=${param1}` })
          break;
        case 17:
          uni.navigateTo({ url: `/productList/productList/index?categoryId=${param1}&categoryLevel=${param2}` })
          break;
        case 19:
          uni.navigateTo({ url: `/orders/moreOrderDetail/index?id=${param1}` }) //订单详情
          break;
      }
    },
    async getConfigTips() {
      setPageParamsFn(this, null)
      const { memberId } = this.vuex_memberInfo
      const params = {
        memberId,
        noticeType: 10,
        pageNum: this.pageNum,
        pageSize: 10
      }
      const res = await getConfigTips(params)
      if (res.errorCode != 0) {
        this.$u.toast(res.message)
        return
      }
      this.status = ''
      setPageParamsFn(this, null)
      if (!res.data || (this.page == 1 && res.data.result.length == 0)) {
        setPageParamsFn(this, 'EMPTY', '矮油，这里空空如也~', false)
        return
      }
      if (this.page == 1) {
        this.configList = res.data.result
      } else {
        this.configList.push(...res.data.result)
      }
      this.totalPages = res.data.totalRecord
      if (res.data.pageSize <= this.pageSize) {
        this.status = 'nomore'
      }
    },
    async batchUpdateOperate() {
      const { memberId } = this.vuex_memberInfo
      const params = {
        memberId,
        noticeType: 10,
        operateType: 0, // 已读
      }
      const res = await batchUpdateOperate(params)
      if (res.errorCode == 0) {
        console.log('已读')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.configNotice {
  padding: 32rpx;
  box-sizing: border-box;
  .noticeSmall {
    width: 100%;
    margin-bottom: 40rpx;
  }
  .timer {
    text-align: center;
    margin-bottom: 10rpx;
    color: #666666;
    font-size: 20rpx;
    font-weight: 400;
  }
  .tipsImg {
    width: 100%;
    height: 216rpx;
    display: block;
  }
  .noticeInfo {
    padding: 32rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 8px;
    .title {
      color: #222222;
      font-size: 28rpx;
      font-weight: 700;
      margin-bottom: 24rpx;
    }
    .tell {
      color: #333333;
      font-size: 24rpx;
      font-weight: 400;
      margin-bottom: 16rpx;
      line-height: 36rpx;
    }
    .bill {
      color: #333333;
      font-size: 24rpx;
      font-weight: 400;
      margin-bottom: 8rpx;
      display: flex;
      line-height: 36rpx;
      view {
        width: 120rpx;
      }
    }
    .Detail {
      display: flex;
      justify-content: space-between;
      align-content: center;
      align-items: center;
      border-top: 1rpx solid #F5F5F5;
      height: 48rpx;
      box-sizing: border-box;
      padding-top: 30rpx;
      margin-top: 30rpx;
      image {
        width: 28rpx;
        height: 28rpx;
      }
    }
  }
}
</style>
